<!-- 分配菜单 -->
<template>
  <div class='app-container'>
    <div class="menus">
      <div v-if="roleMenus.length > 0"> <el-tree :data="roleMenus" node-key="id" show-checkbox :default-expand-all="true"
          :default-checked-keys="defaultMenus" :props="defaultProps" ref="treeRef" /></div>
      <div class="btn">
        <el-button @click="getAddMenus" type="primary" style="margin-left: 20px;">保存</el-button>
        <el-button @click="resetChecked">清空</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import * as role from "@/request/role"
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox, ElTree } from 'element-plus'
const route = useRoute()
const router = useRouter()
const roleId = Number(route.query.id)
const treeRef = ref<InstanceType<typeof ElTree>>()
const roleMenus = ref([]) as any
const defaultMenus = ref([]) as any
const defaultProps = {
  children: 'children',
  label: 'label',
}

// 获取数据
const getMenusData = (id: string) => {
  role.getRoleAlloctionMenus(id).then(async res => {
    if (res.code === 200) {
      defaultMenus.value = res.data.map((item: any) => item.id)
    }
  })
}


// 所有菜单列表
role.roleTreeList().then(res => {
  if (res.code === 200) {
    roleMenus.value = res.data.map((item: IRoleChild) => {
      return {
        id: item.id,
        label: item.title,
        children: item.children.map((el: any) => {
          return {
            id: el.id,
            label: el.title,
          }
        })
      }
    })
  }
})

//给角色分配菜单
let menuIds = ref([]) as any
const getAddMenus = () => {
  menuIds = treeRef.value!.getCheckedKeys()
  ElMessageBox.confirm(
    '此操作将删除当前用户, 是否继续?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    role.roleAlloMenu(menuIds, roleId).then(res => {
      if (res.code == 200) {
        ElMessage.success('操作成功')
        router.push('role')
      }
    })
  })
}

//清空选择菜单
const resetChecked = () => {
  treeRef.value!.setCheckedKeys([], false)
}

watch(() => route.query.id, () => {
  if (route.query.id !== undefined) {
    const id = route.query.id as string
    getMenusData(id)
  }
}, {
  immediate: true
})
// 数据处理
// const changeRoleMenusData = (datas: any) => {
//   let newMenus = [] as any
//   datas.forEach((item: any) => {
//     if (item.parentId === 0) {
//       newMenus[item.id] = {
//         id: item.id, label: item.title, hidden: item.hidden, children: newMenus[item.id]?.children
//       }
//     } else {
//       newMenus[item.parentId] ??= {} as any
//       newMenus[item.parentId].children ??= []
//       newMenus[item.parentId].children?.push({ id: item.id, label: item.title, hidden: item.hidden, })
//     }
//   })
//   return newMenus.filter((item: any) => item)
// }
</script>

<style lang="less" scoped>
.menus {
  border-radius: 4px;
  border: 1px solid #ebeef5;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

  .btn {
    margin: 20px 0;
    text-align: center;
  }
}
</style>